切版時，如果遇到裝飾性的元素，大多會使用偽元素 pseudo-element 來製作，
在我自己的切版經驗中，我覺得他們是網頁很靈魂的存在。

什麼是偽元素？

A CSS pseudo-element is a keyword added to a selector that lets you style a specific part of the selected element(s)

CSS 偽元素是一個加在選擇器後方的關鍵字，讓你可以修改被選取元素的特定部分的樣式。

MDN

如何使用他們？

大多數我使用他們的情境，起手式是長這樣（以::before為例）

XXX::before {
  content:'';
}

這個 content 非常的重要，如果你的 ::before 或是 ::after 忘記加上這個 content，他們就完全不會出現。
如果沒有特別設定位置的話，::before 就會在指定元素的前方，::after 則是在後方，
例如說，我現在有一個裡面寫著 Zombie@Dump 的 p

<p>Zombie@Dump</p>

設定以下的 CSS

p::before {
  content:'::before底加';
  color: #d35400;
}

p::after {
  content:'::after底加';
  color: #d35400;
}

這段文字就會長這樣

content 的值有滿多種的，可以參考 MDN，
或是::before & ::after 無中生有的僞元素選取器 - 傑克這真是太神奇啦

底下示範一個 ::after 的例子：
HTML

<div class="title">Title</div>

CSS

.title {
  background-color: #e67e22;
  color: #fff;
  width: 200px;
  margin: 0 auto;
  text-align: center;
  font-size: 50px;
  position: relative;
}

.title::after {
  content:'';
  position: absolute;
  width: 100%;
  height: 100%;
  border: 2px solid #e67e22;
  left: 5px;
  top: 5px;
}

RESULT

::before, ::after 能做到的變化真的很多，後面的內容也會陸續提到。

以上就是今天的內容，如果有講不對的地方再請各位留言讓我知道，謝謝。
明天要講的是 Banner - 多重背景。